<template>
  <div class="init page-box">
    <Card>
      原货主
      <Select v-model="searchObj.cargoOwner" filterable clearable :remote-method="remoteMethod" style="width: 260px">
        <Option v-for="(item, index) in ownerDataCopyList" :key="index" :value="item.ownerCode">{{item.ownerName}}</Option>
      </Select>
      <Button type="primary" style="margin-left: 5px;" @click="initGridData">查询</Button>
      <Button style="margin-left: 5px;" @click="resetData">重置</Button>
      <el-table
        :data="list"
        height="calc(100vh - 235px)"
        border
        style="width: 100%; margin-top: 10px"
        size="mini"
        highlight-current-row
        :header-cell-style="headerCellStyle"
        oncontextmenu="return false;"
        ref="multipleTable"
        sortable="custom"
        empty-text="暂无数据"
        v-loading="loading"
        @sort-change="onTableSort"
        @selection-change="selectionChange"
      >
        <el-table-column type="index" align="center" label="序号" width="55"></el-table-column>
<!--        <el-table-column type="selection" width="38"></el-table-column>-->
        <el-table-column
          v-for="(item, key) in columns"
          :key="key"
          :prop="item.key"
          :label="item.title"
          :width="item.width"
          align="center"
          :formatter="item.formatter"
          :sortable="item.sortable"
          :show-overflow-tooltip="true"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <template v-if="item.type === 'cargoOwner'">
              {{$handleFormatter(scope.row.cargoOwner, ownerDataList, 'ownerCode', 'ownerName')}}
            </template>
            <template v-else-if="item.type === 'operationType'">
              <span v-if="scope.row.operationType === 1">解押</span>
              <span v-else-if="scope.row.operationType === 0">质押</span>
              <span v-else>-</span>
            </template>
            <template v-else-if="item.type === 'status'">
              <el-tag type="primary" v-if="scope.row.status === '1'">已提交</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === '3'">质押通过</el-tag>
              <el-tag type="warning" v-else-if="scope.row.status === '8'">WMS解押驳回</el-tag>
              <span v-else>-</span>
            </template>
            <template v-else-if="item.type === 'newCargoOwner'">
              {{$handleFormatter(scope.row.newCargoOwner, ownerDataList, 'ownerCode', 'ownerName')}}
            </template>
            <template v-else-if="item.type === 'operate'">
              <span class="operate-btn" v-if="scope.row.status === '1'" @click="clickApprove(scope.row)">质押通过</span>
              <span class="operate-btn" v-if="['3', '8'].includes(scope.row.status)" @click="clickReleasePledge(scope.row)">解押审批</span>
              <span class="operate-btn" v-if="scope.row.status === '1'" style="color: #df5000" @click="clickReject(scope.row)">驳回</span>
            </template>
            <template v-else-if="item.type !== 'template'">
              {{ $table.tableRowFormat(scope.row, item) }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <Row class="margin-top-10">
        <Page
          :total="total"
          :current="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :page-size-opts="listQuery.pageOptionsList"
          size="small"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <Modal
      :value="show"
      title="审批驳回"
      :mask-closable="false"
      @on-ok="onOk"
      @on-cancel="onCancel"
      width="40%">
      <Form ref="formValidate" :model="formData" :label-width="80" label-position="right">
        <FormItem label="驳回原因">
          <Input type="textarea" :row="3" v-model="formData.refuseRemark" placeholder="请输入"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="onOk" type="primary">确认</Button>
        <Button @click="onCancel" type="warning">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {getCurrentAgentPermissionWareHouse} from "@/libs/handleWareHouseList";
import {useCustomer, useHttp, useRealName} from "@/view/wms/js/index";
import {getAllOwner} from "@/api/warehouse/home";

export default {
  name: "PledgeApprove",
  data() {
    return {
      wareObj: {},
      wmsUrl: '',
      formData: {},
      searchObj: {},
      rejectRow: {},
      show: false,
      columns: [
        {
          key: 'orderNum',
          title: '单号',
          width: 200
        },
        // {
        //   key: 'operationType',
        //   title: '操作类型',
        //   type: 'operationType'
        // },
        {
          key: 'status',
          title: '单据状态',
          type: 'status',
          width: 150
        },
        {
          key: 'cargoOwner',
          title: '原货主',
          type: 'cargoOwner',
          width: 200
        },
        {
          key: 'newCargoOwner',
          title: '质押货主',
          type: 'newCargoOwner',
          width: 200
        },
        {
          key: 'operator',
          title: '申请人',
          width: 120
        },
        {
          key: 'createdTime',
          title: '创建时间',
          type: 'datetime',
          width: 150
        },
        {
          key: 'remark',
          title: '备注',
          width: 250
        },
        {
          key: 'refuseName',
          title: '驳回人',
          width: 120
        },
        {
          key: 'refuseTime',
          title: '驳回时间',
          type: 'datetime',
          width: 150
        },
        {
          key: 'refuseRemark',
          title: '驳回原因',
          width: 250
        },
        {
          key: 'operate',
          title: '操作',
          type: 'operate',
          fixed: 'right',
          width: 120
        }
      ],
      list: [],
      selectDataList: [],
      ownerDataList: [],
      ownerDataCopyList: [],
      loading: false,
      total: 0,
      listQuery: {
        pageNum: this.$store.state.sysSettings.pageNum,
        pageSize: this.$store.state.sysSettings.pageSize,
        pageOptionsList: this.$store.state.sysSettings.pageOptionsList,
        filterList: [],
        sortList: [],
        searchKey: "",
        statusList: ['1', '3', '8']
      },
    };
  },
  computed: {
    headerCellStyle() {
      return {
        fontSize: `${12}px`,
        fontWeight: 'bold',
        color: '#8c8c90',
        backgroundColor: 'rgb(239, 243, 247)'
      };
    }
  },
  methods: {
    remoteMethod(query) {
      if (query) {
        setTimeout(() => {
          this.ownerDataCopyList = this.ownerDataList.filter(item => item.ownerName.indexOf(query) > -1);
        }, 100);
      } else {
        this.ownerDataCopyList = [];
      }
    },
    onOk() {
      const {orderNum} = this.rejectRow;
      const useName = useRealName(this);
      this.$Modal.confirm({
        title: '提示',
        content: `是否驳回当前审批?`,
        onOk: () => {
          useHttp('/api/ccis_pledge_apply/updateStatus', {
            orderNum,
            status: '4',
            operationType: 0,
            refuseName: useName,
            operator: useName,
            refuseRemark: this.formData.refuseRemark
          }, this.wmsUrl).then(response => {
            if (response.data.returnCode === 200) {
              this.$Message.success('操作成功');
              this.init();
              this.onCancel();
            } else {
              this.$Message.error(response.data.returnMsg);
            }
          });
        },
        onCancel: () => {
          return false;
        }
      });
    },
    onCancel() {
      this.$refs.formValidate.resetFields();
      this.show = false;
      this.formData = {};
    },
    clickReject(row) {
      this.rejectRow = row;
      this.show = true;
    },
    clickReleasePledge({orderNum}) {
      const useName = useRealName(this);
      this.$Modal.confirm({
        title: '提示',
        content: `是否提交解押审批?`,
        onOk: () => {
          useHttp('/api/ccis_pledge_apply/updateStatus', {
            status: '6',
            orderNum,
            operationType: 1,
            operator: useName
          }, this.wmsUrl).then(response => {
            if (response.data.returnCode === 200) {
              this.$Message.success('操作成功');
              this.init();
            } else {
              this.$Message.error(response.data.returnMsg);
            }
          });
        },
        onCancel: () => {
          return false;
        }
      });
    },
    clickApprove({orderNum}) {
      const useName = useRealName(this);
      this.$Modal.confirm({
        title: '提示',
        content: `是否审批通过?`,
        onOk: () => {
          useHttp('/api/ccis_pledge_apply/updateStatus', {
            orderNum,
            status: '2',
            operationType: 0,
            operator: useName
          }, this.wmsUrl).then(response => {
            if (response.data.returnCode === 200) {
              this.$Message.success('操作成功');
              this.init();
            } else {
              this.$Message.error(response.data.returnMsg);
            }
          });
        },
        onCancel: () => {
          return false;
        }
      });
    },
    getAllOwner() {
      getAllOwner(this.wmsUrl).then(res => {
        this.ownerDataList = res.data.returnData;
      });
    },
    selectionChange(selection) {
      this.selectDataList = selection;
    },
    defaultFileList() {
      this.listQuery.filterList = [];
      this.listQuery.filterList.push({
        filterKey: 'newCargoOwner',
        filterValue: useCustomer(this)
      });
      Object.keys(this.searchObj).forEach(key => {
        this.listQuery.filterList.push({
          filterKey: key,
          filterValue: this.searchObj[key]
        });
      });
    },
    init() {
      getCurrentAgentPermissionWareHouse().then(({data: returnData, message}) => {
        if (returnData) {
          if (!returnData.length) {
            return this.$Message.error('仓库信息为空！');
          }
          this.wareObj = returnData[0];
          this.wmsUrl = this.wareObj.ipProt;
          this.getAllOwner();
          this.initGridData();
        } else if (message) {
          this.$Message.error(message);
        }
      })
    },
    resetData() {
      this.searchObj = {};
      this.initGridData();
    },
    initGridData() {
      this.defaultFileList();
      this.loading = true;
      useHttp('/api/ccis_pledge_apply/pledgeList', this.listQuery, this.wmsUrl).then(res => {
        const {list, total} = res.data.returnData.pageInfo;
        this.list = list;
        this.listQuery.total = total;
      }).finally(() => {
        this.loading = false;
      });
    },
    onTableSort(result) {
      if (result.order === "descending") {
        let sortItem = {
          sortKey: result.prop,
          sortValue: "desc",
        };
        this.listQuery.sortList = [sortItem];
      } else if (result.order === "ascending") {
        let sortItem = {
          sortKey: result.prop,
          sortValue: "asc",
        };
        this.listQuery.sortList = [sortItem];
      } else {
        this.listQuery.sortList = [];
      }
      this.initGridData();
    },
    pageChange(pageNum) {
      this.listQuery.pageNum = pageNum;
      this.initGridData();
    },
    // 改变条数
    pageSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.initGridData();
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style>
.operate-btn {
  cursor: default;
  color: #121fe2;
  margin-right: 8px;
}
</style>
